<template>
    <div class="safety">
        <assets-head :backFunc="() => $router.push('/userCenter')" />
        <div class="content">
            <div class="title textColor">{{ $t('安全') }}</div>
            <div class="tit1 textColor">{{ $t('双重身份认证') }}</div>
            <div class="tit2">{{ $t('为了保护您的财产，建议至少开启一个双重身份验证（2FA）。') }}</div>
        </div>
        <van-grid :column-num="2" :gutter="12" class="verify">
            <van-grid-item v-for="(item, index) in verifyList" :key="index"
                @click="gotoVerify(item.url, item.isVerify, item.type)">
                <div class="verifyBox">
                    <div class="left">
                        <div class="imgBox">
                            <img v-if="item.isVerify" :src="item.icon.verify" alt="">
                            <img v-else :src="item.icon.verifyno" alt="">
                        </div>
                    </div>
                    <div class="right icon">
                        <img src="@/assets/image/userCenter/more.png" alt="">
                    </div>
                </div>
                <div class="name textColor">{{ item.title }}</div>
            </van-grid-item>
        </van-grid>
        <div class="content">
            <div v-for="(obj, index) in list" :key="index" @click="$router.push(obj.url)"
                class="flex justify-between items-center h-102 text-black ">
                <div class="textColor">{{ obj.name }}</div>
                <div class="icon"><img src="@/assets/image/userCenter/more.png" alt=""></div>
            </div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import { Grid, GridItem } from 'vant'
import Axios from "@/API/userCenter.js";
export default {
    props: {

    },
    components: {
        assetsHead,
        [Grid.name]: Grid,
        [GridItem.name]: GridItem
    },
    data() {
        return {
            goHome: true,
            verifyList: [
                {
                    title: this.$t('谷歌验证器'),
                    name: "google",
                    icon: {
                        verifyno: require('@/assets/image/userCenter/gooleVerifyno.png'),
                        verify: require('@/assets/image/userCenter/gooleVerify.png')
                    },
                    isVerify: false,
                    url: '/bindVerify?type=3',
                    type: 3
                },
                // {
                //     title: this.$t('手机验证'),
                //     name: "phone",
                //     icon: {
                //         verifyno: require('@/assets/image/userCenter/phoneVerifyno.png'),
                //         verify: require('@/assets/image/userCenter/phoneVerify.png')
                //     },
                //     isVerify: false,
                //     url: '/bindVerify?type=1',
                //     type: 1
                // },
                {
                    title: this.$t('邮箱验证'),
                    name: "email",
                    icon: {
                        verifyno: require('@/assets/image/userCenter/emialVerifyno.png'),
                        verify: require('@/assets/image/userCenter/emialVerify.png')
                    },
                    isVerify: false,
                    url: '/bindVerify?type=2',
                    type: 2
                }
            ],
            list: [
                {
                    name: this.$t('修改登录密码'),
                    url: "/changePassword"
                },
                {
                    name: this.$t('修改资金密码'),
                    url: "/changeFundsPassword"
                },
                {
                    name: this.$t('人工重置'),
                    url: "/resetVerify?type=0"
                }
            ],
        }
    },
    mounted() {
        this.getVerifTarget()
    },
    methods: {
        getVerifTarget() {
            Axios.getVerifTarget({
            }).then((res) => {
                this.dataRest(res.data)
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
        dataRest(data) {
            this.verifyList.forEach(item => {
                if (item.name == 'google') {
                    item.isVerify = data.google_auth_bind;
                } else if (item.name == 'phone') {
                    item.isVerify = data.phone_authority;
                } else if (item.name == 'email') {
                    item.isVerify = data.email_authority;
                }
            })
        },
        gotoVerify(url, isVerify, type) {
            if (isVerify) {
                this.$router.push(`/changeVerify?type=${type}`);
            } else {
                this.$router.push(url)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.safety {
    width: 100%;
    box-sizing: border-box;

    ::v-deep .van-grid-item__content {
        @include themify() {
            background: themed("cont_background");
        }
    }
}

.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.content {
    padding: 0 32px;
}

.tit1 {
    font-size: 30px;
    font-weight: 400;
}

.tit2 {
    color: #868D9A;
    font-size: 24px;
    margin-top: 9px;
}

.verify {
    font-size: 24px;
    color: #222832;
    margin-top: 42px;
    font-weight: 700;

    .verifyBox {
        display: flex;
        justify-content: space-between;
        padding-left: 28px;
        padding-right: 54px;
        box-sizing: border-box;
        align-items: center;
        width: 100%;

        .left {
            .imgBox {
                width: 90px;
                height: 68px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .name {
        width: 100%;
        padding-left: 28px;
        margin-top: 20px;
    }
}

.icon {
    width: 26px;
    height: 26px;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>
